export const barColor = [
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#FFCD87" // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#FFA137" // 100% 处的颜色
      }
    ],
    global: false // 缺省为 false
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#87E8DE" // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#789BFF" // 100% 处的颜色
      }
    ],
    global: false // 缺省为 false
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#789BFF" // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#4C7AFC" // 100% 处的颜色
      }
    ],
    global: false // 缺省为 false
  }
];
export const pieColor = [
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#D0AFFF" // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#007CF7" // 100% 处的颜色
      }
    ],
    global: false // 缺省为 false
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#AEFF58" // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#D2F673" // 100% 处的颜色
      }
    ],
    global: false // 缺省为 false
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#FFF174" // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#FEFFEA" // 100% 处的颜色
      }
    ],
    global: false // 缺省为 false
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#789BFF" // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#4C7AFC" // 100% 处的颜色
      }
    ],
    global: false // 缺省为 false
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#789BFF" // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#87E8DE" // 100% 处的颜色
      }
    ],
    global: false // 缺省为 false
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#FFCD87" // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#FFA137" // 100% 处的颜色
      }
    ],
    global: false // 缺省为 false
  }
];

function sum(str, a) {
  let b = str.indexOf(a);
  var num = 0;
  while (b !== -1) {
    num++;
    b = str.indexOf(a, b + 1)
  }
  return num;
}

function multi_bubbleSort(obj) {
  const data0 = obj.data0; //横坐标数组
  const data = new Array(data0.length).fill(0); //定义一组与横坐标数组相同大小的且全部为0的数组，用来存储堆积柱状图的和
  const len = obj.data0.length; //横坐标数组长度
  for (let k = 0; k < len; k++) {
    for (let m = 0; m < obj.data1.length; m++) {
      data[k] = Number(data[k]) + Number(obj.data1[m][k]); //求和，用来排序
    }
  }
  //简单排序
  for (let i = 0; i < len; i++) {
    for (let j = 0; j < len - 1 - i; j++) {
      if (Number(data[j]) < Number(data[j + 1])) {
        //相邻元素两两对比
        const temp = data[j + 1]; //元素交换
        data[j + 1] = data[j];
        data[j] = temp;
        //交换横坐标元素
        const te = obj.data0[j + 1]; //元素交换
        obj.data0[j + 1] = obj.data0[j];
        obj.data0[j] = te;
        //交换各堆积柱状图元素
        for (let m = 0; m < obj.data2.length; m++) {
          const tem = obj.data2[m][j + 1];
          obj.data2[m][j + 1] = obj.data2[m][j];
          obj.data2[m][j] = tem;
        }
      }
    }
  }
  return obj;
}

export const getpieOptions = (title, subtext, data) => {
  return {
    tooltip: {
      trigger: "item"
    },
    graphic: {
      elements: [
        {
          type: "image",
          style: {
            image: "pie.png",
            width: 97,
            height: 100
          },
          left: "center",
          top: "center"
        }
      ]
    },
    title: {
      text: title,
      subtext: subtext,
      textStyle: {
        fontSize: 24,
        color: "#66B2FF",
        fontWeight: "bold"
      },
      subtextStyle: {
        fontSize: 16,
        color: "#9DCBF9",
        fontWeight: 500
      },
      textAlign: "center",
      x: "49%",
      y: "38%"
    },
    color: pieColor,
    series: [
      {
        labelLayout:{
          hideOverlap:false,
          moveOverlap:'shiftY'
        },
        type: "pie",
        radius: ["50%", "62%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          formatter: "{b}\n{c}({d}%)",
          color: "#E3EAFD"
        },
        labelLine: {
          show: true
        },
        data: data
      }
    ]
  };
};

export const getKyryOptions = data => {
  const xData = [
    "基础研究\n人员",
    "研究和技\n术人员",
    "科技管理\n人员",
    "科研项目\n管理人员",
    "科技直接\n服务人员"
  ];
  const options = {
    color: barColor,
    tooltip: {
      trigger: "axis",
      confine: true,
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      top: 30,
      bottom: 100
    },
    legend: {
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: "#E3EAFD"
      }
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false
      },

      axisLabel: {
        color: "#E3EAFD"
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(227,234,253,0.3)",
          width: 1 //这里是为了突出显示加上的
        }
      }
    },
    xAxis: {
      type: "category",
      data: xData,
      axisLabel: {
        color: "#E3EAFD"
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        barWidth: "10px",
        name: "华润啤酒",
        type: "bar",
        stack: "total",

        data: data[0]
      },
      {
        barWidth: "10px",
        name: "华润雪花",
        type: "bar",
        stack: "total",

        data: data[1]
      },
      {
        barWidth: "10px",
        name: "华润酒业",

        type: "bar",
        stack: "total",
        data: data[2]
      }
    ]
  };
  options.series[options.series.length - 1]["label"] = {
    show: true,
    position: "top",
    formatter: item => {
      const index = item.dataIndex;
      let total = 0;
      options.series.forEach(el => {
        total += el.data[index];
      });
      return total;
    },
    color: "#E3EAFD"
  };
  const obj = {
    data0: xData,
    data1: [data[0], data[1], data[2]],
    data2: [data[0], data[1], data[2]]
  };
  const multi_obj = multi_bubbleSort(obj);
  options.xAxis.data = multi_obj.data0;
  options.series[0].data = multi_obj.data2[0];
  options.series[1].data = multi_obj.data2[1];
  options.series[2].data = multi_obj.data2[2];
  // debugger
  return options;
};

export const getKyjfOptions = (xAxis, data) => {
  const options = {
    color: pieColor,
    tooltip: {
      trigger: "axis",
      confine: true,
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      top: 30,
      bottom: 50,
      left: 40,
      right: 0
    },
    legend: {
      show: false,
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: "#E3EAFD"
      }
    },

    dataZoom: [
      {
        orient: 'horizontal',
        type: 'inside',
        show: false, //控制滚动条显示隐藏
        realtime: true, //拖动滚动条时是否动态的更新图表数据
        height: 25, //滚动条高度
        start: 0, //滚动条开始位置（共100等份）
        end: 100, //滚动条结束位置
        zoomLock: false //控制面板是否进行缩放
      },
    ],

    xAxis: [
      {
        type: "category",
        triggerEvent: true,
        axisLabel: {
          color: "#E3EAFD",
          fontSize:"10px",
          show:true,
          interval: 0,
          formatter:(value,index) => {
            let result = ""
            if(value.length > 4){
              for(let i=0, j=1; i < value.length; i++,j++) {
                if(j && j%4=== 0) {
              　 result += value[i]+'\n'
              　} else {
              　 result +=  value[i]
              　}
              }
              const total = sum(result,"\n");
              if(total > 2){//换行超过两行，后面加省略号
                result = result.slice(0,13)+"...";
                return result
              }
              else{
                return result
              }
            }else{
              return value
            }

          }
        },
        axisTick: {
          show: false
        },
        data: xAxis
      }
    ],
    yAxis: [
      {
        name: "万元",
        nameTextStyle: {
          color: "#E3EAFD"
        },
        type: "value",
        axisTick: {
          show: false
        },

        axisLabel: {
          color: "#E3EAFD"
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(227,234,253,0.3)",
            width: 1 //这里是为了突出显示加上的
          }
        }
      }
    ],
    series: [
      {
        name: "支出总额",
        barWidth: "2px",
        type: "bar",
        data: data[0],
        itemStyle: {
          color: "rgba(255,255,255,0)"
        }
      },
      {
        name: "科研预算总额",
        barWidth: "10px",
        type: "bar",
        barGap: "80%",
        label: {
          color: "#E3EAFD",
          show: true,
          position: "top"
        },
        data: data[1]
      },

      {
        name: "一月支出总额",
        barWidth: "10px",
        type: "bar",
        stack: "Ad",
        data: data[2]
      },
      {
        name: "二月支出总额",
        type: "bar",
        barWidth: "10px",
        stack: "Ad",
        data: data[3]
      },
      {
        name: "三月支出总额",
        barWidth: "10px",
        type: "bar",
        stack: "Ad",
        data: data[4]
      },
      {
        name: "四月支出总额",
        barWidth: "10px",
        type: "bar",
        stack: "Ad",
        data: data[5]
      },
      {
        name: "五月支出总额",
        barWidth: "10px",
        type: "bar",
        stack: "Ad",
        data: data[6]
      },
      {
        name: "六月支出总额",
        barWidth: "10px",
        type: "bar",
        stack: "Ad",
        data: data[7]
      },
      {
        name: "七月支出总额",
        barWidth: "10px",
        type: "bar",
        stack: "Ad",
        data: data[8]
      },
      {
        name: "八月支出总额",
        barWidth: "10px",
        type: "bar",
        stack: "Ad",
        data: data[9]
      },
      {
        name: "九月支出总额",
        barWidth: "10px",
        type: "bar",
        stack: "Ad",
        data: data[10]
      },
      {
        name: "十月支出总额",
        barWidth: "10px",
        type: "bar",
        stack: "Ad",
        data: data[11]
      },
      {
        name: "十一月支出总额",
        barWidth: "10px",
        type: "bar",
        stack: "Ad",
        data: data[12]
      },
      {
        name: "十二月支出总额",
        barWidth: "10px",
        type: "bar",
        stack: "Ad",
        data: data[13]
      }
    ]
  };
  options.series[options.series.length - 1]["label"] = {
    show: true,
    position: "top",
    formatter: item => {
      const index = item.dataIndex;
      let total = 0;
      options.series.forEach((el, i) => {
        if (i > 1) {
          total += el.data[index];
        }
        // total -= el.data[0];
      });

      return total;
    },
    color: "#E3EAFD"
  } as any;

  return options;
};

export const getCycgOption = data => {
  return {
    tooltip: {
      trigger: "item"
    },
    legend: {
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: "#E3EAFD"
      }
    },
    color: pieColor,
    series: [
      {
        type: "pie",
        radius: "50%",
        label: {
          show: true,
          formatter: "{b}\n{c}，{d}%",
          color: "#E3EAFD"
        },
        labelLine: {
          show: true
        },
        data: data
      }
    ]
  };
};

export const getCycgBarOption = (xAxis, data) => {
  const options = {
    color: barColor,
    tooltip: {
      trigger: "axis",
      confine: true,
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      left: 36,
      right: 0,
      top: 18,
      bottom: 67
    },

    yAxis: {
      type: "value",
      axisTick: {
        show: false
      },

      axisLabel: {
        color: "#E3EAFD"
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(227,234,253,0.3)",
          width: 1 //这里是为了突出显示加上的
        }
      }
    },
    xAxis: {
      type: "category",
      data: xAxis,
      axisLabel: {
        color: "#E3EAFD"
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        barWidth: "10px",
        name: "华润啤酒",
        type: "bar",
        stack: "total",

        data: data[0]
      },
      {
        barWidth: "10px",
        name: "华润雪花",
        type: "bar",

        stack: "total",
        data: data[1]
      },
      {
        barWidth: "10px",
        name: "华润酒业",
        type: "bar",

        stack: "total",
        data: data[2]
      }
    ]
  };
  options.series[options.series.length - 1]["label"] = {
    show: true,
    position: "top",
    formatter: item => {
      const index = item.dataIndex;
      let total = 0;
      options.series.forEach(el => {
        total += el.data[index];
      });
      return total;
    },
    color: "#E3EAFD"
  };
  const obj = {
    data0: xAxis,
    data1: [data[0], data[1], data[2]],
    data2: [data[0], data[1], data[2]]
  };
  const multi_obj = multi_bubbleSort(obj);
  options.xAxis.data = multi_obj.data0;
  options.series[0].data = multi_obj.data2[0];
  options.series[1].data = multi_obj.data2[1];
  options.series[2].data = multi_obj.data2[2];
  return options;
};
